// 函数组件
import React, { useState, useEffect } from 'react';
import { Input, Button, Checkbox, Form, message, Space } from 'antd';
import '../../css/public.less'
import './css/GoodEvaluationDetail.less'
import { useLocation } from 'react-router-dom'
import { userInfo } from 'os';
import { join } from 'path';
import { reply } from '../../../api/ycl'
const { TextArea } = Input;
interface DataType {
    appraiseId: React.Key;
    goodsName: string; // 商品名称
    userName: string; // 用户昵称
    appraisePoint: string; //评分
    appraiseType: string; // 类型
    appraiseCreated: string; //时间
    appraiseStatus: string; // 是否显示
    appraiseContent: string;//评价的内容
    appraiseAdmin: string;//
    appraiseImg: string;//图片
    appraiseRep: string;//
    goodsSerNum: string;//序号
    orderId: string;//
    skuMsg: {}//
}
function GoodEvaluationDetail() {
    const location = useLocation()
    const { state } = location
    const { TextArea } = Input;
    console.log(state);
    const [id, setId] = useState<string>() //评论ID
    const [form] = Form.useForm();

    useEffect(() => {
        setId(state.appraiseId) //把传过来的评价ID赋值
        let emplName = JSON.parse(sessionStorage.getItem('userInfo') as string) //取出存在浏览器里面的管理员名
        console.log(emplName);
        form.setFieldsValue({ //赋值给input
            username: emplName.emplName
        })
    })
    const [messageApi, contextHolder] = message.useMessage()

    // 发起请求
    const onFinish = async (values: any) => {
        console.log('Success:', values);
        let data = ({
            appraiseRep:values.username,
            appraiseContent:values.password,
            appraiseId:id
        })
        try{
            let res = await reply(data)
            if(res.code == '200'){
                messageApi.open({
                    type: 'success',
                    content: '回复成功',
                  });
            }
        }catch(err){
            console.log(err);
            
        }
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };



    return (
        <div className='GoodEvaluationDetail'>
             {contextHolder}
            <div className='page-top'>
                <div className='page-title'>
                    <p>评价详情</p>
                </div>
            </div>
            <div className='particulars'>
                <div className='userName'>
                    <div className='img'>
                        <img src="" alt="" />
                        <p>{state.userName}</p>
                    </div>

                    <div className='shopUser'>
                        <p>商品：{state.goodsName}</p>
                        <p>尺码：{state.skuMsg}</p>
                        <p>评分：{state.appraisePoint}分</p>
                        <p>评价时间：{state.appraiseCreated}</p>
                    </div>
                </div>
                <div className='content'>
                    <div className='contentTitle'>
                        <p>评价内容</p>
                        <p>{state.appraiseContent}</p>
                        <p>评论图片</p>
                        <div className='img'>
                            <img src="" alt="" />
                        </div>
                    </div>
                    <div className='contentTitle1'>
                        <Form
                            form={form}
                            className='userData'
                            name="basic"
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                            >
                                <Input disabled={true} />
                            </Form.Item>

                            <Form.Item
                                label="回复内容"
                                name="password"
                            >
                                <TextArea showCount maxLength={100} placeholder="请输入回复内容" />
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    回复
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default GoodEvaluationDetail